<template>
  <div class="s-box">
    <!-- 导航 -->
    <van-nav-bar title="NFTS" left-text="" class="space-nav" :border="false" :fixed="true" left-arrow @click-left="onClickLeft"></van-nav-bar>
    <!-- 正文 -->
    <div class="nav-top">
      <div class="s-box-start__nav">

        <!-- 统计 start -->
        <div class="container">
          <div class="row py-4">
            <div class="col ">
              <div class="nftsbg d-flex justify-content-center text-center py-2">
                <div class="w-50 py-3">
                  <div class="fs-4">{{totalData.count}}</div>
                  <div class="fw-lighter">NFTS</div>
                </div>
                <div class="w-50 py-3">
                  <div class="fs-4"><span class="fs-7">￥</span>{{totalData.value}}</div>
                  <div class="fw-lighter">NFTs价值</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 统计 end-->

        <!-- 选项卡 -->
        <div class="d-flex px-2">
          <div class="topic-nav" :class="ntype == 1 ? 'topic-active' : ''" @click="nftType(1)">
            NFT专题
          </div>
          <div class="topic-nav" :class="ntype == 2 ? 'topic-active' : ''" @click="nftType(2)">
            NFT盲盒
          </div>
        </div>

        <div class="container ">
          <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-config-provider :theme-vars="themeVars">
              <van-list :loading="loading" :finished="finished" finished-text="" @load="onLoad" @offset="10">

                <div class="" v-for="(item, index) in listItems" :key="index">
                  <!-- 专题 -->
                  <van-row class="bgimg-1 rounded-3 mb-3" v-if="ntype == 2">
                    <van-col span="7" class="topic-item__img">
                      <img :src="item.cardPath" class="img-fluid rounded-3" style="height:8em" alt="" />
                      <div class="topic-item__img__status" :class="$statusFilters.cls(item.status)">
                        {{ $statusFilters.name(item.status)}}
                      </div>
                    </van-col>
                    <van-col span="14">
                      <div class="py-3 px-2 d-flex flex-column h-100">
                        <div class="mb-auto text-truncate">{{item.cardName}}</div>
                        <div class="fs-4 my-1"><span class="fs-7">￥</span>{{item.cardPrice}}</div>
                        <div class="fs-8 ">拥有日期：{{item.createTime}}</div>
                      </div>
                    </van-col>
                    <van-col span="3">
                      <div class="w-100 h-100 btn-more" @click="onMore(item)"></div>
                    </van-col>
                  </van-row>
                  <!-- 盲盒 -->
                  <van-row class="bgimg-1 rounded-3 mb-3 topic-item__img" v-if="ntype == 1">
                    <van-col span="8" class="">
                      <div class="topic-item__img__status fs-7" :class="$statusFilters.cls(item.status)">
                        {{ $statusFilters.name(item.status)}}
                      </div>
                      <div class="topic-item_opened__img mt-4 mb-1">
                        <img src="../assets/img/opened-n.png" class="img-fluid h-25 mx-auto d-block" alt="">
                      </div>
                    </van-col>
                    <van-col span="13">
                      <div class="py-3 px-2 d-flex flex-column h-100">
                        <div class="mb-auto text-truncate">{{item.cardName}}</div>
                        <div class="fs-4 my-1">{{item.cardPrice}} SU</div>
                        <div class="fs-8 ">编号:{{item.serialNumber}}</div>
                      </div>
                    </van-col>
                    <van-col span="3">
                      <div class="w-100 h-100 btn-more" @click="onMore(item)"></div>
                    </van-col>
                  </van-row>
                </div>

              </van-list>
            </van-config-provider>
          </van-pull-refresh>
          <!-- NFT专题 -->
        </div>
      </div>
    </div>
    <!-- 操作 start -->
    <van-config-provider :theme-vars="themeVarsActionSheet">
      <van-action-sheet :show="showActionSheet" :actions="actions" :round="false" @select="onSelect" cancel-text="取消" close-on-click-action @cancel="onCancel" />
    </van-config-provider>
    <!-- 操作 end -->

    <!-- 确认上架 start -->
    <van-popup :show="showConfirmOnPopup" position="bottom" closeable round :style="{ backgroundColor: '#020a1e' }" :onClose="closeConfirmOnPopup">
      <div class="container mt-3 mb-4">
        <div class="row">
          <div class="col">
            <h3>{{selectItem.cardName}}</h3>
          </div>
        </div>
        <!-- 内容 -->

        <div class="row mt-4">
          <div class="col-12 mt-3 d-flex align-items-center">
            售卖须知 <img src="../assets/img/yesx.png" style="height:1em" class="ms-3 me-1" alt=""> 可上架
          </div>

          <div class="col-12 fs-8 mt-3">
            <p>1.NFT采用即时成交的交易模式,先买先得,每日换手次数最高限制5次,換手价格最高限制5万以内;</p>
            <p>2.售卖者设置了可售卖的底价,用户出价之后自动撮合成交;</p>
            <p>3.若有多人同时出价,以用户支付成交时间为准,失效的出价将自动退回原账户;</p>
            <!-- <p>4.售卖所得=本次成交价-交易手续费一作者分成。交易手续费=本次成交价*1%,作者分成=(本次成交价-历史最高成交价)*10%(若差额≤0则无分成);</p> -->
            <p>4.交易成功,NFT自动转至购买者NFT钱包。</p>
          </div>
        </div>

        <div class="row mt-3">
          <div class="col-12">
            售卖价格
          </div>
          <div class="col-12 mt-3">
            <van-config-provider :theme-vars="themeVarsInput">
              <van-field v-model="sellPrice" type="number" placeholder="请设置售卖底价" class="border border-sold" />
            </van-config-provider>
          </div>
        </div>

        <div class="row mt-4">
          <div class="col-12">
            <button type="button" class="btn btn-primary my-4 d-block mx-auto w-50" @click="onConfirmOn">确认出售</button>
          </div>
        </div>

      </div>
    </van-popup>
    <!-- 确认上架 end -->
  </div>
</template>

<script lang="ts">
import { onMounted, reactive, ref, toRefs } from 'vue'
import { useRouter } from 'vue-router'
import { apis, postRequest } from '@/common/ts/request'
import { Toast } from 'vant'
export default {
  setup() {
    const state = reactive({
      ntype: 1,
      loading: false,
      finished: false,
      refreshing: false,
      page: 1,
      pages: 0,
      listItems: [],
      showActionSheet: false,
      actions: [
        { name: '上架售卖' },
        { name: '查看作品' },
        { name: '下架作品' },
      ],
      totalData: {},
      selectItem: {},
      showConfirmOnPopup: false,
      sellPrice: '',
      isAppend: false,
    })

    const themeVars = {
      cellBackgroundColor: 'transparent',
      cellHorizontalPadding: 0,
      listTextColor: '#f2f3f5',
    }
    const themeVarsActionSheet = {
      actionSheetItemBackground: '#020a1e',
      actionSheetCancelTextColor: '#a8d0fc',
      actionSheetCancelPaddingColor: '#04102b',
    }
    const themeVarsInput = {
      cellBackgroundColor: '#020a1e',
      fieldInputTextColor: '#6a85a3',
      fieldPlaceholderTextColor: '#6a85a3',
    }

    const router = useRouter()

    const loadData = async () => {
      const { data } = await postRequest(apis.nftList, {
        type: state.ntype,
        current: state.page,
        size: 10,
      })

      console.log(data)

      if (state.page == data.current && !state.isAppend) {
        state.isAppend = true
        state.listItems = state.listItems.concat(data.list)
      }

      state.pages = data.pages
      state.loading = false
      if (state.page >= data.pages) state.finished = true
    }

    // 加载
    const onLoad = () => {
      if (!state.refreshing && state.page < state.pages) {
        console.log(state.page)
        console.log(state.pages)
        state.page = state.page + 1
        state.isAppend = false
      }

      if (state.refreshing) {
        state.listItems = []
        state.refreshing = false
      }
      loadData()
    }

    // 下拉刷新
    const onRefresh = () => {
      state.refreshing = true
      state.finished = false
      state.loading = true
      state.page = 1
      state.isAppend = false
      onLoad()
    }

    //汇总数据
    const loadTotalData = async () => {
      const { data } = await postRequest(apis.nftCollect)
      state.totalData = data
      console.log(data)
    }

    // 后退
    const onClickLeft = () => history.back()

    // 切换选项卡
    const nftType = (t: number) => {
      state.ntype = t
      onRefresh()
    }

    // 显示更多操作
    const onMore = (item: any) => {
      console.log(item)
      state.selectItem = item
      state.showActionSheet = true
    }

    // 取消
    const onCancel = () => {
      state.showActionSheet = false
    }
    // 选择
    const onSelect = async (item, index) => {
      console.log(item, index)
      onCancel()

      //上架
      if (index == 0) {
        openConfirmOnPopup()
        return false
      }

      //查看详情
      if (index == 1) {
        router.push({
          path: '/spaceDetail',
          query: { id: (state.selectItem as any).id },
        })
        return false
      }
      //下架
      if (index == 2) {
        const { data } = await postRequest(apis.offShelf, {
          id: (state.selectItem as any).id,
        })

        if (data === true) {
          Toast.success('下架成功')
          return false
        }
        Toast.fail('下架失败!' + data)
        return false
      }
    }

    //打开确认上架弹窗
    const openConfirmOnPopup = () => {
      state.sellPrice = ''
      state.showConfirmOnPopup = true
    }
    //关闭确认上架弹窗
    const closeConfirmOnPopup = () => {
      state.showConfirmOnPopup = false
    }

    // 挂载
    onMounted(async () => {
      await loadTotalData()
    })

    //确认上架
    const onConfirmOn = async () => {
      console.log(state.sellPrice)

      const { data } = await postRequest(apis.putOnTheShelf, {
        id: (state.selectItem as any).id,
        sellPrice: state.sellPrice,
      })

      if (data === true) {
        Toast.success('上架成功')
        closeConfirmOnPopup()
        return false
      }
      Toast.fail('上架失败!' + data)
    }

    return {
      ...toRefs(state),
      themeVars,
      themeVarsActionSheet,
      themeVarsInput,
      onClickLeft,
      nftType,
      onMore,
      onLoad,
      onRefresh,
      onCancel,
      loadTotalData,
      onSelect,
      closeConfirmOnPopup,
      openConfirmOnPopup,
      onConfirmOn,
    }
  },
}
</script>

<style lang="scss" scoped>
.topic-nav {
  padding: 0.3em 0;
  margin: 0.5em 1em;
}

.nftsbg {
  background: transparent url('../assets/img/nftsbg.png') center no-repeat;
  background-size: 100%;
}

.btn-more {
  background: transparent url('../assets/img/more.png') center no-repeat;
  background-size: 60%;
}

.topic-active {
  color: #164ed2;
  border-bottom: 4px solid #164ed2;
}
.topic-item {
  &__img {
    position: relative;
    img {
      display: block;
      height: 12.5em;
    }
    &__status {
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      padding: 0.1em 0.2em;
      border-top-left-radius: 0.3em;
      border-bottom-right-radius: 0.3em;
      color: #fff;
      background-color: #99bfe9;
    }

    ._pending {
      background-color: #5481fe;
    }

    ._end {
      background-color: #98989a;
    }
  }
  &_opened__img {
    background: transparent url('../assets/img/openedbox.png') center no-repeat;
    background-size: cover;
    height: 8em;
    position: relative;
    img {
      position: absolute;
      height: 3em !important;
      left: 50%;
      top: 20%;
      transform: translate(-50%, -50%);
    }
  }
}

.border-sold {
  border-color: #99bfe9 !important;
}
</style>
